<template>
  <div id="infobox" class="game-info-panel">
    <h3>FPS: <span id="fps-rate">{{ gameFps }}</span></h3>
    <h3 id="time-remain"></h3>
    <h3>得分:{{ score }}</h3>
    <h3>无敌时间:{{ invincibleTimer }}s</h3>
  </div>
</template>

<script>
export default {
  name: 'VGameInfoPanel',
  props: {
    gamePlayer: {
      type: Object,
    },
    score: {
      type: Number,
      default: 0
    },
    gameFps: {
      type: [String ,Number],
      default: 0
    }
  },
  data() {
    return {
    };
  },
  computed: {
    invincibleTimer() {
      if(this.gamePlayer && this.gamePlayer.snakeInfo) {
        return parseInt(this.gamePlayer.snakeInfo.invincibleTimer / 1000) 
      }
      return 0
    },
  },
  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss">
.game-info-panel{
	position: absolute;
	right: 0;
	top: 0;
	padding: 1.2rem;
  h3{
    font-size: 0.8rem;
  }
}
</style>